<template>
  <t-transfer
      v-model="targetValue"
      :data="contentList"
      :checked="checked"
      @change="onChange"
      @checked-change="handleCheckedChange"
  />
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {TransferProps} from 'tdesign-vue-next';

const list: TransferProps['data'] = [];
for (let i = 0; i < 20; i++) {
  list.push({
    value: i.toString(),
    label: `内容${i + 1}`,
    disabled: i % 4 < 1,
  });
}

// 测试数据
let contentList = ref([
  {value:'1',label:"餐厅"},
  {value:'2',label:"餐线"},
  {value:'3',label:"菜品名称"},
  {value:'4',label:"价格"},
  {value:'5',label:"员工名称"},
  {value:'6',label:"数量"},
  {value:'7',label:"时间"},
])


const targetValue = ref([]);
const checked = ref<TransferProps['checked']>(['2']);
const handleCheckedChange: TransferProps['onCheckedChange'] = (
    {
      checked: checkedVal,
      sourceChecked,
      targetChecked,
      type,
    }) => {
  console.log("选中的内容", checkedVal)

  // console.log('handleCheckedChange选中内容', {
  //   checkedVal,
  //   sourceChecked,
  //   targetChecked,
  //   type,
  // });
  console.log("资源",sourceChecked)

  checked.value = checkedVal;
};
const onChange: TransferProps['onChange'] = (newTargetValue) => {
  console.log('newTargetValue', newTargetValue);
};
</script>
